<template>
  <div class="app-container">
    <div class="button">
      <el-row style="padding-bottom: 1rem">
        <el-col :offset="12" :span="12" align="right">
          <div class="grid-content bg-purple-dark">
            <el-button @click="$router.back()">返回</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-table
      id="myform"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="商品名称" align="center">
        <template slot-scope="scope">{{ scope.row.productName }}</template>
      </el-table-column>

      <el-table-column label="订购数量" align="center">
        <template slot-scope="scope">{{ scope.row.productNum }}</template>
      </el-table-column>
      <el-table-column label="商品总价" align="center">
        <template slot-scope="scope">{{ scope.row.productPrice }}</template>
      </el-table-column>
      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
          <el-image :src="byteToArray(scope.row.productPicture)"/>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import $ from "@/api/project";

  export default {
    data() {
      return {
        value: "",
        state: 0,
        list: [],
        val: "",
        roleId: "",
        userNumber: "",
        listLoading: true,
        options: [],
        roleList: [],
      };
    },
    created() {
      this.find(this.$route.query.id);
    },
    methods: {
      byteToArray(path) {
        return  "http://localhost:8090/product/imgInfo?path="+path
      },
      find(id) {
        this.listLoading = true;
        $.findOrdersById({orderId:id}).then(res => {
            console.log(res.data)
            this.list = res.data
            this.listLoading = false
          }
        );
      },
    }
  };
</script>
<style scoped>
  .button {
    padding-left: 1rem;
  }
</style>
